<template>
  <div class="panel">
    <div class="weather-container">
      <div class="location">
        <i class="iconfont icon-location"></i>
        <span>{{ location }}</span>
      </div>
      <div class="weather-content">
        <div class="weather-main">
          <div class="temperature">
            <span class="value">{{ weatherData.temp }}</span>
            <span class="unit">℃</span>
          </div>
          <div class="weather-desc">{{ weatherData.text }}</div>
          <div class="temp-range">
            <span class="min">{{ weatherData.tempRange.min }}°</span>
            <span class="separator">~</span>
            <span class="max">{{ weatherData.tempRange.max }}°</span>
          </div>
        </div>
        <div class="weather-details">
          <div v-for="item in detailItems" :key="item.label" class="detail-item">
            <i :class="`iconfont ${item.icon}`"></i>
            <div class="info">
              <div class="label">{{ item.label }}</div>
              <div class="value">{{ item.value }}{{ item.unit }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'

// 和风天气API配置
const API_KEY = 'e028e3e804104f63b92fa49bbf04665a'
let CITY_ID = '101100901' // 朔州的城市ID

// 位置信息
const location = ref('朔州市')

// 天气数据
const weatherData = ref({
  temp: 26,
  text: '晴',
  icon: '100',
  humidity: 65,
  windSpeed: 3.2,
  windDir: '东北风',
  precip: 0,
  pressure: 1013,
  visibility: 10,
  tempRange: {
    min: 18,
    max: 28
  }
})

// 计算属性处理详情项
const detailItems = computed(() => [
  { icon: 'icon-humidity', label: '湿度', value: weatherData.value.humidity, unit: '%' },
  { icon: 'icon-wind', label: '风速', value: weatherData.value.windSpeed, unit: 'm/s' },
  { icon: 'icon-wind-direction', label: '风向', value: weatherData.value.windDir },
  { icon: 'icon-rain', label: '降水量', value: weatherData.value.precip, unit: 'mm' },
  { icon: 'icon-pressure', label: '气压', value: weatherData.value.pressure, unit: 'hPa' },
  { icon: 'icon-visibility', label: '能见度', value: weatherData.value.visibility, unit: 'km' }
])

// 获取天气数据
const fetchWeatherData = async () => {
  try {
    // 获取实时天气
    const nowResponse = await fetch(`https://devapi.qweather.com/v7/weather/now?location=${CITY_ID}&key=${API_KEY}`)
    const nowData = await nowResponse.json()
    
    // 获取3天天气预报
    const dailyResponse = await fetch(`https://devapi.qweather.com/v7/weather/3d?location=${CITY_ID}&key=${API_KEY}`)
    const dailyData = await dailyResponse.json()
    
    if (nowData.code === '200' && dailyData.code === '200') {
      // 获取今天的最高温和最低温
      const todayForecast = dailyData.daily[0]
      
      weatherData.value = {
        temp: parseInt(nowData.now.temp),
        text: nowData.now.text,
        icon: nowData.now.icon,
        humidity: parseInt(nowData.now.humidity),
        windSpeed: parseFloat(nowData.now.windSpeed),
        windDir: nowData.now.windDir,
        precip: parseFloat(nowData.now.precip),
        pressure: parseInt(nowData.now.pressure),
        visibility: parseInt(nowData.now.vis),
        tempRange: {
          min: parseInt(todayForecast.tempMin),
          max: parseInt(todayForecast.tempMax)
        }
      }
    }
  } catch (error) {
    console.error('获取天气数据失败:', error)
  }
}

// 获取当前位置
const getCurrentLocation = () => {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      async (position) => {
        try {
          // 使用经纬度获取城市信息
          const { latitude, longitude } = position.coords
          const response = await fetch(`https://geoapi.qweather.com/v2/city/lookup?location=${longitude},${latitude}&key=${API_KEY}`)
          const data = await response.json()
          if (data.code === '200' && data.location && data.location.length > 0) {
            location.value = data.location[0].name
            // 更新城市ID
            CITY_ID = data.location[0].id
            // 重新获取天气数据
            fetchWeatherData()
          }
        } catch (error) {
          console.error('获取位置信息失败:', error)
        }
      },
      (error) => {
        console.error('获取地理位置失败:', error)
      }
    )
  }
}

onMounted(() => {
  fetchWeatherData()
  getCurrentLocation()
  // 每30分钟更新一次天气数据
  setInterval(fetchWeatherData, 30 * 60 * 1000)
})
</script>

<style scoped>
.panel {
  height: 100%;
  padding: 1rem;
  border-radius: 12px;
}

.weather-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.location {
  display: flex;
  align-items: center;
  margin-bottom: 2%;
  color: #33ffd0;
  font-size: 1.8em;
  font-weight: bold;
  padding-bottom: 1.2%;
  border-bottom: 1px solid rgba(51, 255, 208, 0.2);
}

.location i {
  margin-right: 0.6em;
  font-size: 1.4em;
}

.weather-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90%;
  gap: 2%;
}

.weather-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 2%;
  width: 25%;
}

.temperature {
  display: flex;
  align-items: baseline;
  margin-bottom: 0.8%;
}

.temperature .value {
  font-size: 5em;
  font-weight: bold;
  color: #33ffd0;
  text-shadow: 0 0 20px rgba(51, 255, 208, 0.4);
  line-height: 1;
}

.temperature .unit {
  font-size: 2.5em;
  color: #33ffd0;
  margin-left: 0.3em;
}

.weather-desc {
  font-size: 1.8em;
  color: #33ffd0;
  font-weight: 500;
  margin-bottom: 0.3em;
}

.temp-range {
  display: flex;
  align-items: center;
  gap: 0.4em;
  font-size: 1.4em;
  color: #33ffd0;
}

.temp-range .min,
.temp-range .separator,
.temp-range .max {
  color: #33ffd0;
}

.weather-details {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5%;
  padding: 0 2%;
  width: 75%;
  height: 100%;
}

.detail-item {
  display: flex;
  align-items: center;
  padding: 1.2% 1.5%;
  border-radius: 10px;
  transition: all 0.3s ease;
  border: 1px solid rgba(51, 255, 208, 0.1);
}

.detail-item:hover {
  transform: translateY(-2px);
  border-color: rgba(51, 255, 208, 0.2);
}

.detail-item i {
  font-size: 1.6em;
  color: #33ffd0;
  margin-right: 0.8em;
}

.detail-item .info {
  display: flex;
  flex-direction: column;
}

.detail-item .label {
  font-size: 1.2em;
  color: rgba(51, 255, 208, 0.8);
  margin-bottom: 0.3em;
}

.detail-item .value {
  font-size: 1.5em;
  color: #33ffd0;
  font-weight: bold;
}

@media (max-width: 768px) {
  .weather-content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .weather-main {
    padding-right: 0;
    align-items: center;
    text-align: center;
  }
  
  .weather-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .weather-details {
    grid-template-columns: 1fr;
  }
  
  .detail-item {
    padding: 0.6rem;
  }
}
</style>